<template>
  <div class="login">
    <header class="header">
      <a class="site-logo">猫眼电影</a>
    </header>
    <div class="body">
      <div class="left">
        <img src="../assets/2.png" />
      </div>
      <div class="right">
        <el-form>
          <p class="p1">账号登录</p>
          <el-input
            v-model="username"
            placeholder="用户名"
            class="user_name"
          ></el-input>

          <el-input
            class="password"
            type="password"
            v-model="password"
            placeholder="密码"
          ></el-input>

          <el-button class="login_button" type="primary" @click="submitForm"
            >登录</el-button
          >
          <p class="signup-guide">还没有账号，<a @click="goregister">免费注册</a></p>
          <input
            type="checkbox"
            class="checkbox"
            v-model="isChecked"
          />
          <i class="c1"></i>
          <div class="text">我已阅读同意</div>
        </el-form>
      </div>
    </div>
    <footer class="footer">
      <div class="copyright">
        <p>美团网团购,京东公安备案</p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      isChecked: false
    };
  },
  methods: {
    submitForm(values) {
      const usernameReg = /^[^\s]*$/ 
      if(this.username === "" || this.password === ""){
        return alert("用户名和密码不能为空")
      }else if (usernameReg.test(this.username)) {
        return alert('用户名不能有空格')
      } else if (this.isChecked !== true) {
        return alert("勾选协议");
      } else {
        localStorage.setItem('token',this.username)
        // this.$store.commit('setUser',this.username)
        return this.$router.back()
      }
    },
    goregister(){
      this.$router.push('/register')
    }
  }
};
</script>
<style scoped>
.header {
  width: 980px;
  height: auto;
  margin: 40px auto 30px;
}
.site-logo {
  display: block;
  width: 230px;
  height: 45px;
  margin: 0;
  color: #ec454a;
  font-size: 40px;
  margin-left: 7%;
  font-weight: 700;
}
.body {
  width: 980px;
  margin: 0 auto 70px;
}
.left {
  float: left;
  height: 370px;
  margin: 0 115px 0 0;
  width: 480px;
}
.right {
  float: left;
  padding-top: 0;
  margin: 0 auto;
  width: 270px;
  background: #fff;
}
.el-input {
  margin-left: -100px;
  width: 275px;
}
.p1 {
  margin-top: 50px;
  margin-left: -100px;
}
.user_name {
  margin-top: 15px;
}
.password {
  margin-top: 15px;
}
.login_button {
  margin-left: -100px;
  width: 275px;
  background-color: #ec454a;
  margin-top: 30px;
}
.signup-guide {
  font-weight: 300;
  margin-left: -100px;
  margin-top: 10px;
}
.signup-guide a {
  color: #ec454a;
  cursor: pointer;
}

.checkbox {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin-left: -100px;
}
.checkbox .c1 {
  background-color: #fed100;
  display: inline-block;
  border: 1px solid #ccc;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  margin: 2px 5px;
}
.checkbox .c1::after {
  position: absolute;
  content: "";
  width: 3px;
  height: 5px;
  top: 30%;
  left: 50%;
  transform: rotate(45deg) translateX(-50%);
  border: 1px solid #222;
  border-top: none;
  border-left: none;
}
.text {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  margin-left: -80px;
  margin-top: -20px;
}
.footer {
  margin: 0 auto 30px;
  clear: both;
  width: 980px;
  font-size: 10px;
  color: #999;
}
.copyright {
  text-align: center;
  color: #ccc;
  clear: both;
  font-size: 12px;
  font-family: initial;
}
.copyright p {
  padding-top: 70px;
}
</style>
